<template>
  <n-form
    ref="formRef"
    :model="formValue"
    :inline="form.inline"
    :size="form.size"
    :label-width="form.width"
    :label-placement="form.labelPlacement"
    :rules="ruleList"
  >
    <n-grid
      :cols="form.column"
      :x-gap="form.gutter[0]"
      :y-gap="form.gutter[1]"
      :responsive="'screen'"
    >
      <n-gi v-for="(item, field) in formItemList">
        <n-form-item :key="item.title" :label="item.title" :path="String(field)">
          <n-input
            v-model:value="formValue[field]"
            :placeholder="`请输入${item.title}`"
            v-if="item.widget === 'Input'"
          />
          <n-input
            v-model:value="formValue[field]"
            :placeholder="`请输入${item.title}`"
            v-if="item.widget === 'Textarea'"
            v-bind="item.props"
          />
          <InputGroup
            v-else-if="item.widget === 'InputGroup'"
            v-model:value="formValue[field]"
            v-bind="item.props"
          />
          <n-input-number
            v-else-if="item.widget === 'InputNumber'"
            v-model:value="formValue[field]"
            :placeholder="`请输入${item.title}`"
            style="width: 100%"
          />
          <n-select
            v-else-if="item.widget === 'Select'"
            style="width: 100%"
            v-model:value="formValue[field]"
            :placeholder="`请选择${item.title}`"
            v-bind="item.props"
          />
          <n-cascader
            v-else-if="item.widget === 'Cascader'"
            v-model:value="formValue[field]"
            :placeholder="`请选择${item.title}`"
            v-bind="item.props"
          />
          <n-color-picker
            v-else-if="item.widget === 'ColorPicker'"
            v-model:value="formValue[field]"
            :placeholder="`请选择${item.title}`"
            v-bind="item.props"
          />
          <n-checkbox-group v-model:value="formValue[field]" v-else-if="item.widget === 'Checkbox'">
            <n-space>
              <n-checkbox
                :value="option.value"
                :key="option.value"
                :label="option.label"
                v-for="option in item.props.options"
              />
            </n-space>
          </n-checkbox-group>
          <n-radio-group v-model:value="formValue[field]" v-else-if="item.widget === 'Radio'">
            <n-space>
              <n-radio
                :value="option.value"
                :key="option.value"
                :label="option.label"
                v-for="option in item.props.options"
              />
            </n-space>
          </n-radio-group>
          <n-date-picker
            v-model:formatted-value="formValue[field]"
            v-else-if="item.widget === 'DatePicker'"
            v-bind="item.props"
          />
          <n-rate
            v-model:value="formValue[field]"
            v-else-if="item.widget === 'Rate'"
            v-bind="item.props"
          />
          <n-switch
            v-model:value="formValue[field]"
            v-else-if="item.widget === 'Switch'"
            v-bind="item.props"
          >
            <template #checked>{{ item.props.checked }}</template>
            <template #unchecked>{{ item.props.unchecked }}</template>
          </n-switch>
          <n-upload v-else-if="item.widget === 'Upload'" v-bind="item.props"> </n-upload>
          <!-- {{ item.widget }} -->
        </n-form-item>
      </n-gi>
    </n-grid>

    <n-form-item>
      <n-space>
        <n-button type="primary" @click="submitForm"> 提交 </n-button>
        <n-button @click="resetForm"> 重置 </n-button>
      </n-space>
    </n-form-item>
  </n-form>
  <n-divider />
  {{ formValue }}
</template>

<script setup lang="ts">
import InputGroup from './components/InputGroup.vue'
import type { FormInst } from 'naive-ui'
import type { LabelPlacement } from 'naive-ui/es/form/src/interface'
const props = defineProps<{
  schema: Record<string, any>
}>()

const emit = defineEmits<{
  submit: [value: Record<string, any>]
}>()

const formRef = ref<FormInst | null>(null)

// 表单的值
const formValue = ref<Record<string, any>>({})

// 表单配置
const form = computed(() => {
  const { size, labelWidth, layout } = props.schema
  return {
    size: size,
    width: labelWidth,
    inline: layout === 'inline',
    labelPlacement: (layout === 'horizontal' ? 'left' : 'top') as LabelPlacement,
    column: props.schema.column,
    gutter: props.schema.gutter,
  }
})

// 表单规则
const ruleList = computed(() => {
  const rules: Record<string, any> = {}
  for (const key in formItemList.value) {
    const item = formItemList.value[key]
    if (item.rules) {
      rules[key] = item.rules
    }
  }
  console.log('rules: ', rules, typeof rules)
  return rules
})

// 表单项列表
const formItemList = computed(() => props.schema.properties)

// 重置表单
function resetForm() {
  for (const key in formValue.value) {
    formValue.value[key] = null
  }
}

// 提交表单
function submitForm(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      emit('submit', toRaw(formValue.value))
    }
  })
}
</script>

<style scoped></style>
